<template>
  <div class="helpCenter warp">
    <el-container class="hc_content">
      <el-aside width="200px">

        <el-menu
                ref="menu"
                :default-active="active"
                class="el-menu-vertical-demo"
                @select="openActive"
                unique-opened
                background-color="#fef0f0"
                text-color="#303133"
                active-text-color="#cc0000">
                    <div v-for="item in helpList" :key="item.id" :index="item.id+''">
                        <!-- 没有子菜单 -->
                        <template v-if="!item.children || item.children.length == 0">
                            <el-menu-item :index="item.id+''">
                                {{ item.title }}
                            </el-menu-item>
                        </template>
                        <!-- 有子菜单 -->
                        <el-submenu v-else :index="item.id+''">
                        <template slot="title">
                            {{item.title}}
                        </template>
                        <div v-for="child in item.children" :key="child.id">
                            <template v-if="!child.children || child.children.length == 0">
                                <el-menu-item :index="child.class_id+'-'+child.help_id">
                                    {{ child.title }}
                                </el-menu-item>
                            </template>
                        </div>
                    </el-submenu>
                    </div>
                </el-menu>
      </el-aside>
      <el-main>
          <v-title
            :content="name"
            :font-size="20"
            v-if="name"
            class="title"/>
          <p v-html="content"></p>
        
      </el-main>
    </el-container>
  </div>
</template>
<script>
import {helpCategoryList,helpContent} from '@/api/user'
import vTitle from '@/components/title/a-tip.vue'
export default {
  name: "help",
  components: {
    vTitle
  },
  data() {
    return {
      helpList:[],
      active:'1-7',
      content:'',
      name:''
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList(){
     let onlyId = this.$route.query.avticeID;
        helpCategoryList().then(res=>{
            this.helpList = res.data;
            this.openActive(onlyId)
        });
    },
    openActive(key, keyPath) {
      // console.log(key)
        let id = key.substring(key.indexOf("-",0)+1);
        this.active = key;
        if(key.indexOf("-") != -1){
            this.helpList.forEach(element => {
                element.children.filter((item) => {
                    if(item.help_id == id) {
                    this.name = item.title;
                   
                    }
                }) 
            });

            helpContent({help_id:id}).then(res =>{
                // console.log('res',res.data);
                this.content = res.data.content;
            });
        }else{
            this.content = '';
            this.name = ''
        }

       
    },
    // // 展开指定菜单的回调
    // openMenuItem(index,indexPath){
    //   console.log(index,'===',indexPath)
    // },
  },
};
</script>
<style lang="less" scoped>
.helpCenter {
  .hc_content {
    margin-top: 20px;
  }
  .el-aside {
    color: #333;
    text-align: center;
    // line-height: 200px;
  }
  .el-main {
    min-height: 600px;
    background-color: #fff;
    // color: #606266;
    .title{
        margin-bottom: 10px;
    }
  }
}
</style>